<template>
	<view class="serve_width" style="padding-bottom: 200rpx;">
		<!-- 导航 -->
		<u-navbar back-text="商家售后" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		
		<view  >
			<view class="serve_width" style="border-bottom:2rpx solid #DCDCDC ;">
				<view class="" style="font-size: 34rpx;color: #666666;width: 92%;padding: 20rpx 0; margin: auto; font-weight: bold;display: flex;align-items: center;" v-if="details.handled == 1">
				<image style="width: 44rpx;height: 44rpx;margin-right: 10rpx;" src="../../static/imgs/service_sh.png"></image> <view>平台审核中</view>	
				
				</view>
				<view class="" style="font-size: 34rpx;color: #666666;width: 92%;padding: 20rpx 0; margin: auto; font-weight: bold;display: flex;align-items: center;" v-if="details.handled == 2">
				<image style="width: 44rpx;height: 44rpx;margin-right: 10rpx;" src="../../static/imgs/service_ju.png"></image> <view>平台拒绝了您的退款申请</view>	
				</view>
				<view class="" style="font-size: 34rpx;color: #666666;width: 92%;padding: 20rpx 0; margin: auto; font-weight: bold;display: flex;align-items: center;" v-if="details.handled == 3">
				<image style="width: 44rpx;height: 44rpx;margin-right: 10rpx;" src="../../static/imgs/service_tg.png"></image> <view>平台通过了您的退款申请</view>	
				</view>
				
			</view>
			<view v-if="details.handled == 1" style="width: 92%;margin:28rpx auto;font-size: 26rpx;color: #979797;">
				平台已收到您的退款申请，将会在工作时间联系您配合你解决
			</view>
			<view v-if="details.handled == 2" style="width: 92%;margin:28rpx auto;font-size: 26rpx;color: #979797;">
				平台拒绝了您的申请退款，如有疑问请联系商家。
			</view>
			<view v-if="details.handled == 3" style="width: 92%;margin:28rpx auto;font-size: 26rpx;color: #979797;">
				平台通过了您的退款申请，将会在规定时间内退还到支付账户
			</view>
			<view style="width: 100%;height:12rpx ;background-color: #E8E8E8;"></view>
			
			<!-- 买家申请原因 -->
			<view style="width: 92%;padding: 28rpx 0; margin: auto;display: flex;align-items: center;justify-content: space-between;">
				
				<view v-if="type==2" style="color: #666666;font-size: 30rpx;">买家申请保险理赔</view>
				<view v-else style="color: #666666;font-size: 30rpx;">买家申请退款</view>
				<view style="color: #3F3F3F;font-size: 26rpx;">{{details.creatTime}}</view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #DCDCDC;"></view>
			
			<view>
			
				<view class="serve_width2" style="padding: 15rpx 0rpx;">
					<view class="serve_text" style="padding: 5rpx 0rpx;">
               <text style="color: #000000;"> 售后原因：</text>  
                {{ details.reason || '未填写' }}</view>
					<view class="serve_text"  style="padding: 10rpx 0rpx;">
				 <text style="color: #000000;">   用户描述：</text>  
                
                {{ details.comments || '未填写' }}</view>
				
					<view v-if="details.images" class="img_box" style="display: flex;margin-top: 20rpx;flex-wrap: wrap;">
						<view style="width: 154rpx;height: 154rpx;margin-right: 20rpx;" v-for="(ite, inde) in details.images" :key="inde" @click="clickPreview(items.imageList, inde)">
							<image :src="ite" mode="" style="width: 154rpx;height: 154rpx;margin-right: 38rpx;"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="serve_width" style="padding-top: 10rpx;"></view>
			<view class="serve_button" @click="intervene(item.orderIssueId)" v-if="item.handled==12||item.handled==2">申请平台介入</view>
			<view class="serve_button" @click="finish(item.orderIssueId)" v-if="item.handled==9||item.handled==3">售后已完成</view> -->
		</view>
		<!-- <view class="serve_width serve_border ">
			<view class="serve_width2" style="overflow: hidden;padding:20rpx 0rpx 10rpx 0rpx ;">
				<view class="serve_title" style="float: left;">买家申请重新服务</view>
				<view class="serve_time" style="float: right;">2021-1-12 12:00</view>
			</view>
		</view>
		<view class="serve_width2" style="padding: 15rpx 0rpx;">
			<view class="serve_text" style="padding: 5rpx 0rpx;">售后原因：没有打扫干净</view>

			<view class="img_box" style="">
				<view v-for="(item, index) in imgs" :key="index" style="width: 30%;height: 200rpx;background-color:#DFDFDF ;margin-top: 20rpx;"></view>
			</view>
		</view> -->
		<!-- <view class="serve_width" style="border-bottom:12rpx solid #E8E8E8 ;padding-top: 10rpx;"></view> -->

		<!-- <view class="serve_width serve_border ">
			<view class="serve_width2" style="overflow: hidden;padding:20rpx 0rpx 10rpx 0rpx ;">
				<view class="serve_title" style="float: left;">买家申请重新服务</view>
				<view class="serve_time" style="float: right;">2021-1-12 12:00</view>
			</view>
		</view>
		<view class="serve_width2" style="padding: 15rpx 0rpx;">
			<view class="serve_text" style="padding: 5rpx 0rpx;">售后原因：没有打扫干净</view>
			<view class="serve_text" style="padding: 5rpx 0rpx;">用户描述：没有打扫干净</view>
			<view class="img_box" style="">
				<view v-for="(item, index) in imgs" :key="index" style="width: 30%;height: 200rpx;background-color:#DFDFDF ;margin-top: 20rpx;"></view>
			</view>
		</view> -->
		<!-- <view class="serve_width" style="border-bottom:12rpx solid #E8E8E8 ;padding-top: 10rpx;"></view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: '#fca800'
			},
			timestamp: 86400,
			details: '',
			type:''
		};
	},
	onLoad(option) {
		this.orderId = option.orderId;
		if(option.type){
			this.type=option.type
		}
		this.getDetail();
		
	},
	methods: {
		// 点击放大
		clickPreview(imageList, inde) {
			uni.previewImage({
				current: inde,
				urls: imageList,
				indicator: 'default',
				loop: true
			});
		},
		//撤销申请
		chexiao(orderIssueId) {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'order-issue/cancel'
			};
			let data = {
				issueId: orderIssueId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if ((res.code = 200)) {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
					setTimeout(function() {
						uni.switchTab({
							url: '../../pages/order/index'
						});
					}, 500);
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		FormData(data) {
			switch (data) {
				case 1:
					return '申请中';
				case 2:
					return '商家拒绝';
				case 3:
					return '重新服务中';
				case 4:
					return '商家同意退款';
				case 5:
					return '平台仲裁中';
				case 6:
					return '平台介入通过';
				case 7:
					return '平台介入通过';
				case 8:
					return '平台介入拒绝';
				case 9:
					return '商家售后完成';
				case 10:
					return '用户售后完成';
				case 11:
					return '商家超时未回复';
				case 12:
					return '申请撤销';
				case 13:
					return '平台拒绝理赔';
				case 14:
					return '平台同意理赔';
				case 15:
					return '商家超时未回复后退款';
				default:
					return;
			}
		},
		getDetail() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'unit-orders/issueInfo'
			};
			let data = {
				orderId: this.orderId 
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if ((res.code = 200)) {
					console.log(res.data, '售后详情');
					_this.details = res.data;
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		editMarket() {
			uni.navigateBack({
				delta: 1
			});
		},
		finish(orderIssueId) {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'order-issue/finish'
			};
			let data = {
				issueId: orderIssueId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if ((res.code = 200)) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		intervene(orderIssueId) {
			uni.navigateTo({
				url: 'intervene?orderIssueId=' + orderIssueId
			});
		}
	}
};
</script>

<style>
.serve_width {
	width: 100%;
	margin: auto;
}

.serve_width2 {
	width: 93%;
	margin: auto;
}

.serve_button {
	z-index: 10;
	text-align: center;
	border-radius: 36rpx;
	font-size: 32rpx;
	color: white;
	font-weight: bold;
	line-height: 72rpx;
	width: 82%;
	bottom: 40rpx;
	height: 72rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fca800;
}

.serve_border {
	border-bottom: 2rpx solid #dcdcdc;
}
.border_css {
	width: 100%;
	height: 2rpx;
	background-color: #dcdcdc;
}

.serve_title {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 42rpx;
	color: #666666;
}

.text_css {
	margin-left: 20rpx;
	width: 140rpx;
	height: 42rpx;
	background: #fca800;
	padding: 5rpx 12rpx;
	font-size: 25rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 42rpx;
	color: #ffffff;
	border-radius: 20rpx;
}

.serve_time {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 42rpx;
	color: #3f3f3f;
}

.serve_text {
	text-align: justify;
	padding: 20rpx 0rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 36rpx;
	color: #979797;
}

.img_box {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
</style>
